<template>
  <div class="FIleManage">
    <div class="content">
      <div class="left-menu">
        <div class="header">
          <!-- <el-button icon="el-icon-bottom" class="btnicon"></el-button>
          <div class="rbtn">
            <el-button icon="el-icon-back" class="btnicon"></el-button>
            <el-button icon="el-icon-right" class="btnicon"></el-button>
            <el-button icon="el-icon-top" class="btnicon"></el-button>
          </div> -->
          <menuTree :bizId="bizId" :bizType="bizType" :bizTypeName="bizTypeName" />
        </div>
      </div>
      <div class="right">
        <div class="header">
          <btnUpload v-if="authOpt === 'M'" :btnDisplay="true" :showFiles="false" :uploadbefore="uploadbefore" @uploadSuccess="uploadSuccess" />
          <!-- <el-button type="primary" class="btns" ><i class="el-icon-upload2" style="font-size: 12px;"></i>上传</el-button> -->
          <el-button v-if="authOpt === 'M'" @click="addFile" class="btns btnColor"><i class="el-icon-folder-add"></i>新增文件夹</el-button>
          <el-button-group style="margin-left:10px;">
            <!-- <el-button class="btnColor"> 打包文件</el-button> -->
            <!-- <el-button class="btns btnColor" v-show="selection.length !== 0"><i class="el-icon-download"></i> 下载</el-button> -->
            <el-button v-if="authOpt === 'M'" class="btns btnColor" @click="delBatchNode" v-show="selection.length !== 0"><i class="el-icon-delete"></i> 删除</el-button>
            <!-- <el-button class="btnColor" v-show="selection.length !== 0" @click="fileRight">权限</el-button> -->
          </el-button-group>
          <div class="rbtn">
            <!-- <div class="serchInput">
              <input type="text" class="searchInput" v-model="searchText" placeholder="搜索您的文件">
              <i class="el-icon-search"></i>
            </div> -->
            <el-button :icon="isMenu ? 'el-icon-menu' : 'el-icon-s-operation'" :class="{'btnicon': true, 'activeList': isMenu}" @click="isMenu = !isMenu"></el-button>
          </div>
        </div>
        <!-- 文件展示区域 -->
        <mainContent :authOpt="authOpt" ref="mainContent" :bizId="bizId" :bizType="bizType" :bizTypeName="bizTypeName" :isMenu="isMenu" :isCreadte="isCreadte"
          @addFile="addFile" @selectData="selectData" @selectFolder="selectFolder"/>
      </div>
    </div>
    <privilegeManage :editModel="editModel" :visible.sync="dialogVisible"  :form="item" @handSearch="handleFilter"/>
  </div>
</template>
<script>
  import BaseManage from '@/pages/baseManage'
  import mainContent from '@/pages/fileManage/fileSystem/main'
  import menuTree from '@/pages/fileManage/fileSystem/menuTree'
  import btnUpload from '@/components/button/btnUpload.vue'
  import privilegeManage from '@/pages/fileManage/privilegeManage'
  import {docFolderFileApi} from '@/api/business/businessApi'

  export default {
    extends: new BaseManage(),
    name: 'fileSystem',
    components: {
      mainContent,
      menuTree,
      privilegeManage,
      btnUpload
    },
    props: {
      // 业务数据的id
      bizId: {
        type: String,
        default: 'B1'
      },
      // 业务数据的类型
      bizType: {
        type: String,
        default: '1'
      },
      // 业务数据名称
      bizTypeName: {
        type: String,
        default: 'XXX体系文件'
      },
      // 操作权限 M:管理 v:查看
      authOpt: {
        type: String,
        default: 'V'
      }
    },
    data () {
      return {
        contextMenuVisible: true,
        searchText: '',
        isMenu: false, // 是否是菜单显示
        // 是否新建文件夹
        isCreadte: true,
        selection: [],
        editModel: 'E',
        dialogVisible: false,
        item: {},
        folders: [],
        fileData: [],
        folderId: 'B1',
        fileMode: {
          img: '',
          fileName: '',
          fileSize: '',
          date: '',
          checked: false,
          id: '',
          isCreadte: false,
          isFolder: true
        }
        // uploadAPi: '/restapi/tw/doc/folderFile/file/'
        // uploadAPi: '/fastdfs/upload/file'
      }
    },
    created () {

    },
    watch: {
      bizId: {
         handler (v) {
          this.folderId = v
        },
        immediate: true
      }
    },
    methods: {
      addFile () {
        this.$refs.mainContent.addFile()
      },
      // 获取选中数据
      selectData (val) {
        this.selection = val
      },
      // 文件权限设置
      fileRight () {
        this.dialogVisible = true
      },
      // 上传成功
      uploadSuccess (data) {
        console.log('folderId:', this.folderId)
        data.bizType = this.bizType
        docFolderFileApi.saveFileInfo(data, this.folderId).then(ret => {
            if (ret.code === 0) {
              this.$refs.mainContent.reloading()
            }
        })
      },
      // 选择新的文件夹
      selectFolder (folderId) {
        this.folderId = folderId
      },
      // 上传前检查
      uploadbefore (file) {
        return !this.$refs.mainContent.recheckName(file.name)
      },
      // 批量删除
      delBatchNode () {
        return !this.$refs.mainContent.delBatchNode()
      }
    },
    computed: {
      // api () {
      //   return docFolderFileApi
      // }
      // uploadFileApi () {
      //   // return this.uploadAPi + this.folderId
      //   return this.uploadAPi
      // }
    }
  }
</script>

<style lang="scss">
  .FIleManage .content{
    min-width: 900px;
    height: calc(100vh - 101px);
    box-sizing: border-box;
    display: flex;
    margin: -9px -15px; // 将框架外层统一加的padding相抵
  }

  .FIleManage .content .left-menu {
    width: 14%;
    /* padding: 0 10px; */
    background: #E8EFF2;
  }

  .FIleManage .content .left-menu ul {
    margin-top: 6px;
    & > li {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .FIleManage .content .right {
    width: 86%;
    padding: 0 10px;
    background: white;
  }

  .FIleManage .content .right .header .btns {
    position: relative;
    padding-left: 36px;
  }

  .FIleManage .content .right .header .btns i {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 18px!important;
    font-weight: bold;
  }
  .FIleManage .content .right .header .btnColor {
    color: #388CFF;
    border: 1px solid #C3EAFF;
  }

  .FIleManage .content .header {
    height: 50px;
    line-height: 50px;
  }

  .FIleManage .content .rbtn{
    float: right;
  }
  .FIleManage .btnicon {
    font-size: 20px;
    padding: 2px;
    vertical-align: middle;
  }
  .serchInput {
    width: 247px;
    display: inline-block;
    line-height: 30px;
    margin-right: 20px;
    background: #F1F3F5;
    border-radius: 33px;
    padding: 0 38px 0 24px;
    position: relative;
    vertical-align: middle;
  }
  .serchInput i {
    display: block;
    width: 16px;
    height: 16px;
    border: 0;
    position: absolute;
    top: 7px;
    font-size: 16px;
    outline: 0;
    cursor: pointer;
    right: 13px;
    color: #666;
  }
  .serchInput input {
    width: 100%;
    height: 30px;
    background: 0 0;
    border: 0;
    outline: 0;
    line-height: 29px!important;
    position: relative;
    font-size: 12px;
    color: #929292;
  }
  .activeList {
    background: #dae2ea;
  }
  thead .el-table-column--selection .cell{
    padding-left: 14px;
  }
</style>
